<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'home' }">过程任务</el-breadcrumb-item>
            <el-breadcrumb-item>任务详情</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">任务详情</h2>

        <div style="margin: 3% 5% 3% 5%;">
            <!-- 选题详情 -->
            <div>
                <el-descriptions title="选题详情" column="2" size="large">
                    <el-descriptions-item label="任务名称" width="200px">{{ taskDetial.processName }}</el-descriptions-item>
                    <el-descriptions-item label="专业">{{ taskDetial.classMajorName }}</el-descriptions-item>
                    <el-descriptions-item label="开始时间">{{ taskDetial.startDate }}</el-descriptions-item>
                    <el-descriptions-item label="截止时间">{{ taskDetial.endDate }}</el-descriptions-item>
                </el-descriptions>
            </div>

            <h1>班级详情</h1>
            <div style="margin-top:2%;"><!-- 收到的小队邀请 -->
                <el-table :data="getStuStatus" height="300" border stripe style="width: 100%;">
                    <el-table-column prop="stuName" label="学生姓名" />
                    <el-table-column prop="stuId" label="学号" />
                    <el-table-column prop="className" label="班级" />
                    <el-table-column prop="subDate" label="提交时间" :formatter="formatStuDate"/>
                    <el-table-column fixed="right" label="报告" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="doewnFile(scope.row.stuPhone, scope.row.processId, scope.row.filename)"
                                v-if="scope.row.filename != null">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="$router.push('outProTask')" style="margin-top: 3%; float: right;">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onBeforeMount, computed } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import requests from '@/api/ajax';

const route = useRoute();
//   挂载前进行
onBeforeMount(() => {
    const processId = route.query.publishId
    //初始显示老师所有的教学大纲
    const getStu = requests({ url: "/inner/processTask/" + processId, method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        if (res.code === 20041) {
            getStuStatus.value = res.rdata
            aaa();
        } else {
            getStuStatus.value = null
        }


    })
        .catch(err => {
            console.error(err);
            // 登录请求失败后的操作
        });
})

//学生提交信息
const getStuStatus = ref([
    {
        processId: '',
        processName: "",
        processType: '',
        startDate: "",
        endDate: "",
        content: "",
        scoreStart: "",
        scoreEnd: "",
        practicalId: '',
        classId: '',
        className: "",
        adviserId: '',
        adviserName: "",
        teachId: '',
        teachName: '',
        practicalType: '',
        onloadDate: '',
        planId: '',
        courseId: '',
        courseName: '',
        majorName: '',
        enrolDate: '',
        filename: "",
        stuId: '',
        stuName: "",
        stuSex: '',
        stuIdentity: '',
        stuCollege: '',
        stuPhone: "",
        classMajorName: "",
        classGraduateDate: ''
    }
])
//页面跳转到发布
const router_useRouter = useRouter()




//过程任务信息
const taskDetial = ref({
    processName: '',
    majorName: '',
    startDate: '',
    endDate: '',
})

function aaa() {
    taskDetial.value.processName = computed(() => getStuStatus.value[0].processName)
    taskDetial.value.classMajorName = computed(() => getStuStatus.value[0].classMajorName)

    const startStr = computed(() => getStuStatus.value[0].startDate);
    taskDetial.value.startDate = computed(() => startStr.value.substring(0, 10));

    const endStr = computed(() => getStuStatus.value[0].endDate);
    taskDetial.value.endDate = computed(() => endStr.value.substring(0, 10));
}

//时间格式化
function formatStuDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  if (cellValue != null) {
    const dataItem = {
      'Y+': date.getFullYear().toString(),
      'm+': (date.getMonth() + 1).toString(),
      'd+': date.getDate().toString(),
    }
    Object.keys(dataItem).forEach((item) => {
      const ret = new RegExp(`(${item})`).exec(format);
      if (ret) {
        format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
      }
    });
    return format
  } else {
    const nothing = ('未提交')
    return nothing
  }

}

//下载报告
function doewnFile(appraiseePhone, processId, filename) {
  if (filename != null) {
    const getReport = requests({ url: "/preview/processTask/" + appraiseePhone + "/" + processId, method: "get", responseType: 'blob', }).then(res => {
      // const blob = new Blob([res.rdata], { type: res.rdata.type });
      // saveAs(blob, 'example.docx');

      // 将响应数据转换为 Blob 对象
      const blob = new Blob([res]);
      // 创建链接进行下载
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
      .catch(err => {
        console.error(err);
        // 请求失败后的操作
      });
  } else {
    alert('该学生未提交报告')
  }
}
</script>